import React, { useState, useEffect } from "react";
import style from "./style.module.css";
import { Tabs, Space } from "antd";
import TableBox from "@c/pcTable";
import { Button, Popconfirm, Modal, Input, Form } from "antd";
import { getGoodsList, addRecycleList, delGoodsList } from "@/api";
import Search from "@c/pcSearch";
import Dialog from "@c/pcDialog";

const { TabPane } = Tabs;

function GoodsAdmainPage(props) {
  const [list, setList] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [key, setKey] = useState(0);
  const [info, setInfo] = useState({});
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
      width: 150,
    },
    {
      title: "商品图",
      dataIndex: "image",
      key: "image",
      width: 80,
      render: (image) => <img className={style.tableImg} src={image} />,
    },
    {
      title: "商品名称",
      dataIndex: "title",
      key: "title",
      ellipsis: true,
    },
    {
      title: "商品售价",
      dataIndex: "price",
      key: "price",
      ellipsis: true,
    },
    {
      title: "销量",
      dataIndex: "salesnum",
      key: "salesnum",
      ellipsis: true,
    },
    {
      title: "库存",
      dataIndex: "inventory",
      key: "inventory",
      ellipsis: true,
    },

    {
      title: "状态",
      dataIndex: "state",
      key: "state",
      ellipsis: true,
    },
    {
      title: "操作时间",
      dataIndex: "time",
      key: "time",
      ellipsis: true,
    },
    {
      title: "操作",
      dataIndex: "caozuo",
      key: "caozuo",
      ellipsis: true,
      render: (text, record) => (
        <Space>
          <a onClick={() => update(record)}>编辑</a>
          <a onClick={() => addRecycle(record)}>加入回收站</a>
        </Space>
      ),
    },
  ];

  const columnsTwo = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
      // render: (index) => <span>{index}</span>,
      width: 80,
    },
    {
      title: "商品图",
      dataIndex: "image",
      key: "image",
      width: 80,
      render: (image) => <img className={style.tableImg} src={image} />,
    },
    {
      title: "商品名称",
      dataIndex: "title",
      key: "title",
      ellipsis: true,
    },
    {
      title: "商品售价",
      dataIndex: "price",
      key: "price",
      ellipsis: true,
    },
    {
      title: "销量",
      dataIndex: "salesnum",
      key: "salesnum",
      ellipsis: true,
    },
    {
      title: "库存",
      dataIndex: "inventory",
      key: "inventory",
      ellipsis: true,
    },

    {
      title: "状态",
      dataIndex: "state",
      key: "state",
      ellipsis: true,
    },
    {
      title: "操作时间",
      dataIndex: "time",
      key: "time",
      ellipsis: true,
    },
    {
      title: "操作",
      dataIndex: "caozuo",
      key: "caozuo",
      ellipsis: true,
      render: (text, record) => (
        <Space>
          <Popconfirm
            title="确定删除此项?"
            onCancel={() => console.log("用户取消删除")}
            onConfirm={() => {
              console.log("用户确认删除");
              // 此处可以调用删除的api接口
              delGoodsList({ id: record.id }).then((res) => {
                getList();
              });
            }}
          >
            <a>删除</a>
          </Popconfirm>
          <a>编辑</a>
          <a>恢复商品</a>
        </Space>
      ),
    },
  ];

  // 获取数据
  const getList = (value) => {
    getGoodsList({
      classify: key,
      input: value,
    }).then((res) => {
      setList(res.data.data);
    });
  };
  // 搜索数据
  const SearchForm = {
    LevelStatus: {
      title: "商品选择：",
      data: [
        //级联选择
        {
          value: "每日优先",
          label: "每日优先",
          children: [
            {
              value: "潮流女装",
              label: "潮流女装",
            },
            {
              value: "美妆",
              label: "美妆",
            },
          ],
        },
        {
          value: "手机",
          label: "手机",
        },
        {
          value: "数码商品",
          label: "数码商品",
          children: [
            {
              value: "相机",
              label: "相机",
            },
          ],
        },
        {
          value: "换季大促",
          label: "换季大促",
        },
        {
          value: "电脑",
          label: "电脑",
        },
      ],
    },
    selectStatus: [], //单层选择
    search: {
      title: "商品搜索：",
      placeholder: "请输入商品名称、关键字",
    },
  };

  // 加入回收站
  const addRecycle = (record) => {
    addRecycleList({
      classify: 3,
      id: record.id,
    }).then((res) => {
      getList();
    });
  };

  // 编辑
  const update = (record) => {
    console.log(record);

    setIsModalVisible(true);
    setInfo({ ...record });
  };

  const handleOk = (e) => {
    console.log(e);
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  // 生命周期
  useEffect(() => {
    console.log(info);
    getList();
  }, [key, info]);

  const callback = (keys) => {
    setKey(() => {
      return keys * 1;
    });
  };
  // 添加商品按钮
  const AddGoods = () => {
    props.history.push("/main/addgoods");
  };

  // 模糊搜索
  const handleSearch = (value) => {
    getList(value);
  };

  // 下拉
  const selectStatus = (value) => {
    // console.log(value);
  };

  const submit = (e) => {
    console.log(e, "8");
  };

  const changeFrom = (e) => {};

  return (
    <div className={style.adminBox}>
      <Tabs defaultActiveKey="0" onChange={callback}>
        <TabPane tab="出售中商品" key="0">
          <Search
            SearchForm={SearchForm}
            selectStatus={selectStatus}
            handleSearch={handleSearch}
          />
          <Dialog
            info={info}
            isShow={isModalVisible}
            handleOk={handleOk}
            handleCancel={handleCancel}
          />
          {/* 添加按钮 */}
          <Button type="primary" onClick={() => AddGoods()}>
            添加按钮
          </Button>
          {/* 表格 */}
          <TableBox columns={columns} key="id" dataSource={list} />
        </TabPane>
        <TabPane tab="仓库中商品" key="1">
          <Button type="primary">添加按钮</Button>
          <TableBox columns={columns} key="id" dataSource={list} />
        </TabPane>
        <TabPane tab="已经售空商品" key="2">
          <TableBox columns={columns} key="id" dataSource={list} />
        </TabPane>
        <TabPane tab="商品回收站" key="3">
          <TableBox columns={columnsTwo} key="id" dataSource={list} />
        </TabPane>
      </Tabs>

      {/* <Modal
        title="编辑商品"
        visible={isModalVisible}
        onOk={handleOk}
        onClick={submit}
        onCancel={handleCancel}
      >
        <Form name="basic" initialValues={info}>
          <Form.Item label="商品名称" name="title">
            <Input onChange={(e) => changeFrom(e, "title")} />
          </Form.Item>
          <Form.Item label="商品售价" name="price">
            <Input onChange={(e) => changeFrom(e, "price")} />
          </Form.Item>
          <Form.Item label="商品库存" name="inventory">
            <Input onChange={(e) => changeFrom(e, "inventory")} />
          </Form.Item>
        </Form>
      </Modal> */}
    </div>
  );
}

export default GoodsAdmainPage;
